<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Add Demo</title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>
<style type="text/css">
#tip{        
  font-weight:bold;              
}
.myred { 
  color: red;
}
.input-group {
  margin-bottom: 20px;
}
.card {
  margin-top: 20px;
  margin-bottom: 20px;
}
.happy {
  background-image: url(pic/happy.gif);
  background-repeat: no-repeat;
  background-position: 180px;
  background-size: 100px 100px;
}
.angry {
  background-image: url(pic/angry.gif);
  background-repeat: no-repeat;
  background-position: 180px;
  background-size: 100px 100px;
}
.set {
  background-image: url(pic/set.gif);
  background-repeat: no-repeat;
  background-size: 100px 100px;
  background-position: 180px;
  animation: mymove 5s 2;
  -webkit-animation: mymove 5s 2;
}
@keyframes mymove {
 from {
background-position: 180px;
}
to {
  background-position: 300px;
}
}
 @-webkit-keyframes mymove {
 from {
background-position: 180px;
}
to {
  background-position: 300px;
}
}
</style>
</head>
<body>
<div class="container">
  <div class="card">
    <div class="card-header"> 加法算术练习 </div>
    <div id="cardbody" class="card-body">
      <h5 class="card-title">温馨提示:</h5>
      <p id="tip" class="card-text">您好!</p >
      <a href="#" class="btn btn-primary">本人主页</a > </div>
  </div>
  <label for="FirstNum">请输入第1个数:</label>
  <div class="input-group input-group-lg">
    <div class="input-group-prepend"> <span class="input-group-text" id="inputGroup-sizing-lg1">First Num:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> </div>
    <input id="FirstNum" step="0.01" min="0" max="100" type="number" value="0" class="form-control" aria-describedby="inputGroup-sizing-lg"/>
  </div>
  <label for="SecondNum">请输入第2个数:</label>
  <div class="input-group input-group-lg">
    <div class="input-group-prepend"> <span class="input-group-text" id="inputGroup-sizing-lg">Second Num:</span> </div>
    <input id="SecondNum" step="0.01" min="0" max="100" type="number" value="0" class="form-control" aria-describedby="inputGroup-sizing-lg"/>
  </div>
  <label for="SumNum">请输入第3个数:</label>
  <div class="input-group input-group-lg">
    <div class="input-group-prepend"> <span class="input-group-text" id="inputGroup-sizing-lg">Sum Num:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> </div>
    <input id="SumNum" step="0.01" min="0" max="100" type="number" value="0" class="form-control" aria-describedby="inputGroup-sizing-lg"/>
  </div>
  <button class="btn" id="set">随机出题</button>
  &nbsp;
  <button class="btn" id="cal">计算</button>
</div>
<script src="../jquery3-3-1/jquery-3.3.1.js"></script> 
<script type="text/javascript">
$(function(){
  $("#set").click(function(){    
     var a=Math.floor((Math.random()*100)+1); 
     var b=Math.floor((Math.random()*100)+1); 
     $("#FirstNum").val(a);
     $("#SecondNum").val(b);
     $("#tip").text("请看题目");
     $("#tip").removeClass("myred");
     $("#cardbody").removeClass("angry");
     $("#cardbody").removeClass("happy");
     $("#cardbody").addClass("set");       
    });
  $("#cal").click(function(){       
      var a=$("#FirstNum").val();
     var b=$("#SecondNum").val();     
     var c=$("#SumNum").val();
     var sumC=parseFloat(a)+parseFloat(b);  
     var sumCC=parseFloat(c);
     if(Math.abs(sumC-sumCC)<0.001)
     {
        $("#tip").text("Bingo!");
        $("#tip").addClass("myred");
    $("#cardbody").removeClass("set");
      $("#cardbody").removeClass("angry");
      $("#cardbody").addClass("happy");
     }
     else
     {
         $("#tip").text("Fool!");
         $("#tip").removeClass("myred");
     $("#cardbody").removeClass("set");
     $("#cardbody").removeClass("happy");
     $("#cardbody").addClass("angry");
     }   
     
    });  
  })
</script>
</body>
</html>